import {Dropdown} from 'antd';
import classNames from 'classnames';
import {useEmotionCss} from '@ant-design/use-emotion-css';

const HeaderDropdown = ({overlayClassName: cls, ...restProps}) => {

  const className = useEmotionCss(({token}) => {
    return {
      [`@media screen and (max-width: ${token.screenXS})`]: {
        width: '100%',
      },
    };
  });

  return (
    <Dropdown
      overlayClassName={classNames(className, cls)}
      getPopupContainer={(target) => target.parentElement || document.body}
      {...restProps}
    />
  );
}

export default HeaderDropdown;